﻿import QtQuick 2.0
import QtQuick.Window 2.0
import QtMultimedia 5.0
import QtQuick.Controls 2.0
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.2
import QtQuick.Dialogs 1.2

Window {
  id: headerMedia
  visible: true
  width: 752
  height: 480
  title: getVideoName(fd.fileUrl.toString())
  Image {
    id: img
    source: "../res/images/icon.png"
    anchors.fill: parent
  }

  // Get video file name
  function getVideoName(str) {
    var url = fd.fileUrl.toString();
    var strList = new Array();
    strList = url.split("/");
    var name = strList[strList.length - 1];
    return name;
  }

  Column {
    Rectangle {
      id: screen
      color: "black"
      width: headerMedia.width
      height: headerMedia.height - 50
      MediaPlayer {
        id: player
        source: fd.fileUrl
        autoPlay: true
        volume: voice.value
      }
      VideoOutput {
        anchors.fill: parent
        source: player
      }
    }
    Rectangle {
      id: control
      // color: "#80202020"
      border.color: "gray"
      border.width: 0
      width: headerMedia.width
      height: 20
      Row {
        spacing: 10
        anchors.verticalCenter: parent.verticalCenter
        anchors.leftMargin: 10
        anchors.left: parent.left

        // adjust playing speed
        Slider {
          id: playSpeed
          width: headerMedia.width * 0.75
          height: 10
          from: 0
          to: player.duration
          value: player.position
          anchors.verticalCenter: parent.verticalCenter
          stepSize: 1000
          SliderStyle {
            groove: Rectangle {
              width: headerMedia.width * 0.8
              height: 8
              color: "gray"
              radius: 2
              Rectangle {
                anchors.left: parent.left
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                width: player.duration > 0 ? parent.width * player.position / player.duration : 0
                color: "blue"
              }
            }
            handle: Rectangle {
              anchors.centerIn: parent
              color: control.pressed ? "white" : "darkgray"
              border.color: "gray"
              border.width: 2
              implicitWidth: 15
              implicitHeight: 15
              radius: 7.5
              Rectangle {
                width: parent.width - 8
                height: width
                radius: width / 2
                color: "blue"
                anchors.centerIn: parent
              }
            }
          }

          // Click mouse to set position of playing
          MouseArea {
            property int pos
            anchors.fill: parent
            onClicked: {
              if (player.seekable)
                pos = player.duration * mouse.x / parent.width
              player.seek(pos)
              playSpeed.value = pos;
            }
          }
        }
        Image {
          width: 15
          height: 15
          source: "../res/images/sound.png"
          anchors.verticalCenter: parent.verticalCenter
        }

        // adjust volume
        Slider {
          id: sound
          width: headerMedia.width * 0.2
          height: 10
          value: player.volume
          stepSize: 0.01
          from: 0
          to: 1
          // anchors.verticalCenter: parent.verticalCenter
          // @disable-check M16
          // style: SliderStyle {
          SliderStyle {
            groove: Rectangle {
              implicitHeight: headerMedia.width * 0.1
              implicitWidth: 4
              color: "green"
              // radius: 1
              Rectangle {
                anchors.left: parent.left
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                width: player.volume > 0 ? parent.width * player.volume : 0
                color: "black"
              }
            }

            handle: Rectangle {
              anchors.centerIn: parent
              color: control.pressed ? "white" : "darkgray"
              border.color: "gray"
              border.width: 2
              implicitWidth: 10
              implicitHeight: 10
              // radius: 7.5
              Rectangle {
                width: parent.width - 8
                height: width / 2
                // radius: width / 8
                color: "blue"
                anchors.centerIn: parent
              }
            }
          }
        }
      }
    }

    // Control area
    Rectangle {
      id: bottom
      // color: "#80202020"
      // color: Qt.rgba(0.5, 0.5, 0.5, 0.9)
      border.color: "gray"
      border.width: 0
      width: headerMedia.width
      height: 30

      Row {
        anchors.verticalCenter: parent.verticalCenter
        anchors.horizontalCenter: parent.horizontalCenter
        // anchors.left: parent.left
        // anchors.leftMargin: 10
        spacing: 10
        Button {
          width: 40
          height: 30
          onClicked: player.stop()
          ToolTip.text: qsTr("停止")
          background: Rectangle {
            color: "white"
          }
          icon.source: "../res/images/stop.png"
        }

        // Retreat quickly 10s
        Button {
          width: 40
          height: 30
          onClicked: player.seek(player.position - 10000)
          ToolTip.text: qsTr("快退")
          background: Rectangle {
            color: "white"
          }
          icon.source: "../res/images/retreat.png"
        }

        Button {
          id: start_btn
          width: 40
          height: 30
          property int status: 1
          icon.source: "qrc:/res/images/pause.png"

          background: Rectangle {
            color: "white"
          }

          onClicked: {
            if (status === 1) {
              player.pause();
              ToolTip.text = qsTr("开始")
              status = 0;
              console.log("start")
              icon.source = "qrc:/res/images/play.png"
            } else {
              player.play();
              ToolTip.text = qsTr("暂停")
              console.log("pause")
              status = 1;
              icon.source = "qrc:/res/images/pause.png"
            }
          }
        }

        // fast forward 10s
        Button {
          width: 40
          height: 30
          onClicked: player.seek(player.position + 10000)
          ToolTip.text: qsTr("快进")
          background: Rectangle {
            color: "white"
          }
          icon.source: "../res/images/fast_forward.png"
        }
        // open file
        Button {
          width: 40
          height: 30
          ToolTip.text: qsTr("打开文件")
          onClicked: fd.open()
          icon.source: "../res/images/fold.png"
          FileDialog {
            id: fd
            nameFilters: ["Video Files(*.avi *.mp4 *.rmvb)"]
            selectMultiple: false
          }
          background: Rectangle {
            color: "white"
          }
        }
        Text {
          anchors.verticalCenter: parent.verticalCenter
          text: parent.currentTime(player.position) + "/" + parent.currentTime(player.duration)
          color: "black"
        }

        function currentTime(time) {
          var sec = Math.floor(time / 1000);
          var hours = Math.floor(sec / 3600);
          var minutes = Math.floor((sec - hours * 3600) / 60);
          var seconds = sec - hours * 3600 - minutes * 60;
          var hh, mm, ss;
          if (hours.toString().length < 2)
            hh = "0" + hours.toString();
          else
            hh = hours.toString();
          if (minutes.toString().length < 2)
            mm = "0" + minutes.toString();
          else
            mm = minutes.toString();
          if (seconds.toString().length < 2)
            ss = "0" + seconds.toString();
          else
            ss = seconds.toString();
          return hh + ":" + mm + ":" + ss;
        }
      }
    }
  }
}
